<template>
    <div id="myCard">
        <header class="header"><router-link to='/mine?type=3' class="toreturn"><i class="el-icon-arrow-left"></i></router-link>我的商品<router-link to='/card/addProduce' class="addArt"><i class="el-icon-edit-outline"></i></router-link></header>
        <div class="contentS">
            <scroller snappingHeight="10" class="scroller" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
                <div class="goodItem" v-for="(list,index) in proList" :class="{isLeft:index%2==0,isRight:index%2!=0}" :key="index">
                    <div class="borderImg">
                        <img @click="toUrl(list.id)" :src="baseUrl.baseUrl+list.cplogo">
                        <p @click="beforeDel(list)" class="del"><i class="icon iconfont icon-icon_delete now"></i></p>
                    </div>
                </div> 
                <div style="clear:both;"></div>   
            </scroller>
        </div>
        <!-- 删除提示框 -->
        <el-dialog
            id="tosureDel"
            :visible.sync="delVisible"
            width="80%"
            style="margin-top:15vh">
            <span>确认删除吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="toDel">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框结束 -->
    </div>
</template>

<script>
import {goodList,delPro} from '../../../js/dataServe.js'
import {baseUrl} from '../../../config/env'
export default {
    data(){
        return {
            delItem:{},
            pageNo:1,
            proList:[],
            baseUrl:{baseUrl},
            delVisible:false
        }
    },
    created(){
        // this.$store.commit('changeShowit',{val:false})
    },
    mounted(){
        this.$store.commit('emptyPublicCard')
    },
    methods:{
        infinite(done) {

            if(sessionStorage.sid){
                let self = this;
                let responseData = goodList(self.pageNo);
                responseData.then((res)=>{
                                        // alert(decodeURIComponent(res.msg))
                                        if(res.data.list && res.data.list.length>0){
                                           
                                            let items = res.data.list;
                                            // console.log(items)
                                            items.forEach( (item,key) => {
                                                self.proList.push(item)
                                            })
                                            self.pageNo++;
                                            done();
                                            
                                        }else{
                                            self.$refs.my_scroller.finishInfinite(2);
                                        }
                                    })
            }
        },
        refresh(done) {
            done()
        },
        beforeDel(list){
            this.delItem = list;
            console.log(this.delItem)
            this.delVisible = true;
        },
        toDel(){
            let self = this;
            let responseData = delPro(self.delItem.id);
            responseData.then((res)=>{
                                        if(res.result==1){
                                            let index = self.proList.indexOf(self.delItem);
                                            self.proList.splice(index,1)
                                            self.$message({
                                                duration: 2000,
                                                message: res.msg,
                                                type: 'success'
                                            })
                                            this.delVisible = false;
                                        }
                                    })
        },
        toUrl(id){
            this.$router.push({path:"/card/product",query:{id:id,uid:sessionStorage.uid}})
        }
    }
}
</script>

<style scoped >
#myCard {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
}
.header{
    width:100%;
    height:3rem;
    line-height:3rem;
    background:#eee;
    color:#333;
    font-size:1.2rem;
    position: fixed;
    top: 0;
    z-index:5;
}
.header i{ color: #333;}
header .toreturn{
    position: absolute;
    left: 2%;
    color: #ffffff;
    width: 2rem;
}
header .addArt{
    position: absolute;
    right: 2%;
    color: #ffffff;
    width: 2rem;
    font-size: 1.6rem;
}
.contentS{
    width:100%;
    position:absolute;
    top:3rem;
    bottom:0;
    height:auto;
}
.scroller{
    padding: 0 1rem;
    box-sizing: border-box;
}
.goodItem{
    padding: 1rem 0 0 0;
    width: 11rem;
    height: 11rem;
}
.isLeft{
    float:left;
}
.isRight{
    float:right;
}
.borderImg{
    height:100%;
    width:100%;
    position:relative;
}
.borderImg img{
    height:100%;
    width:100%;

}
.del{
    position:absolute;
    height:2rem;
    width:2rem;
    background:rgba(0,0,0,0.5);
    top:0.5rem;
    right:0.5rem;
    border-radius:2rem;
    display:flex;
    justify-content: center;
    align-items: center;
}
.del i{
    color:#ffffff;
}
</style>
